﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Ajax.aspx.cs" Inherits="VMWorkshop.Web.Ajax" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Ajax Products Editor</title>
    <link rel="Stylesheet" type="text/css" href="../content/global.css" />
    <script src="../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
    <h1>Ajax Products Editor</h1>
    <form id="form1" runat="server">
    <asp:ScriptManager EnablePageMethods="true" runat="server" />
    <asp:GridView ID="grdProducts" 
        AlternatingRowStyle-CssClass="alt"
        AutoGenerateColumns="false" 
        EnableViewState="false" 
        runat="server">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <a href="javascript:void(0);" onclick="select('<%# Eval("ProductId") %>');">Select</a>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField HeaderText="Title" DataField="Title" />
            <asp:BoundField HeaderText="Description" DataField="Description" />
            <asp:BoundField HeaderText="Qty" DataField="QuantityOnHand" />
        </Columns>
    </asp:GridView>
    
    <div id="product" class="hide">
        <input type="hidden" id="productId" name="productId" />
        <div class="item">
            <div class="lbl"><label for="title">Title</label></div>
            <div class="ctl"><input type="text" id="title" name="title" /></div>
        </div>
        <div class="item">
            <div class="lbl"><label for="description">Description</label></div>
            <div class="ctl"><input type="text" id="description" name="description" /></div>
        </div>
        <div class="item">
            <div class="lbl"><label for="qty">Qty on Hand</label></div>
            <div class="ctl"><input type="text" id="qty" name="qty" /></div>
        </div>
        <div class="item">
            <div class="lbl"><label for="releasedate">Release Date</label></div>
            <div class="ctl"><input type="text" id="releasedate" name="releasedate" /></div>
        </div>
        <div class="item">
            <div class="lbl"><label for="price">Price</label></div>
            <div class="ctl"><input type="text" id="price" name="price" /></div>
        </div>
        <div class="item">
            <div class="nolbl">&nbsp;</div>
            <div class="ctl"><input type="button" value="Save" onclick="save();" /></div>
        </div>
    </div>
    
    <div id="updateMsg" class="hide">Updates are complete.</div>

    </form>
    
    <script type="text/javascript">
        function select(id)
        {
            $("#updateMsg").hide();
            PageMethods.GetProductById(id, onProductRetrived, onFail);
        }

        function onProductRetrived(response)
        {
            $("#productId").val(response.ProductId);
            $("#title").val(response.Title);
            $("#description").val(response.Description);
            $("#qty").val(response.QuantityOnHand);
            $("#releasedate").val(response.ReleaseDate);
            $("#price").val(response.Price);
            $("#product").show();
        }

        function onFail(response)
        {
            alert(response.get_error());
        }

        function save()
        {
            var editView = 
                {
                    ProductId : $("#productId").val(),
                    Title : $("#title").val(),
                    Description: $("#description").val(),
                    Price: $("#price").val(),
                    QuantityOnHand : $("#qty").val(),
                    ReleaseDate : $("#releasedate").val()
                };
                
            PageMethods.PersistChanges(editView, onSaveComplete, onFail);
        }
        
        function onSaveComplete()
        {
            $("#product").hide();
            $("#updateMsg").show();            
        }
    </script>
</body>
</html>
